<template>
  <div class="case">
    <div class="heigthBox">
      <div class="headerImg">
        <!-- <div>
          <div v-if="BakImg" class="title">{{ $t(`messages.product.bakImgList[0].title`) }}</div>
          <div v-else class="title">{{ $t(`messages.product.title`) }}</div>
        </div> -->

        <img v-if="BakImg" :src="$t(`messages.product.bakImgList[0].bakImg`)" alt="" />
        <img v-else src="../../assets/image/case/3.png" alt="" srcset="" />
      </div>
    </div>

    <div class="caseList">
      <div class="caseBox jusCenter" v-for="(item, index) in swiperData" :key="index">
        <div class="card">
          <div class="cardImg">
            <img :src="$t(`messages.product.productList[${index}].image`)" alt="" srcset="" />
          </div>
          <!-- <div class="cardText aliCenter">
            <div class="left">
              <div class="title">{{ $t(`messages.product.productList[${index}].title`) }}</div>
              <div class="size">
                {{ $t(`messages.product.productList[${index}].detils`) }}
              </div>
            </div>
            <div class="rigth">
              <ul>
                <li v-for="(item2, index2) in item.allDetilsList" :key="index2">
                  <div class="title2">
                    {{
                      $t(`messages.product.productList[${index}].allDetilsList[${index2}].allTitle`)
                    }}
                  </div>
                  <div class="size2">
                    {{
                      $t(
                        `messages.product.productList[${index}].allDetilsList[${index2}].allDetils`
                      )
                    }}
                  </div>
                </li>
              </ul>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { productLisType, productBakListType, productList } from '@/http/api/case.js'
import { useRoute } from 'vue-router'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { ref, reactive, onMounted, toRaw, watch } from 'vue'

const route = useRoute()
const changeHeigth = () => {
  let heigthBox = document.querySelector('.heigthBox')
  heigthBox.style.height = `${swiperData.value.length * 5.1 + 5}rem`
}
let swiperData = ref([])
let pageData = reactive({
  page: 1,
  size: 50
})
let BakImg = ref('')
let titleList = ref([])

const getFilmType = () => {
  let url = window.location.href.toString()
  let filmNam = [{
    url: 'paint-protection-film-PPF',
    type: 'Paint Protection Film (PPF)'
  }, {
    url: 'color-paint-protection-film-PPF',
    type: 'Color Change Film'
  }, {
    url: 'window-film',
    type: 'Window Tint Film'
  }, {
    url: 'sunroof-film',
    type: 'Roof Wrap Film'
  }]
  filmNam.forEach((item) => {
    if (url.includes(item.url)) {

      pageData.type = item.type
    }
  })
}


const getProdectList = async () => {
  let res = ''
  if (pageData.type) {
    res = await productLisType(pageData)
  } else {
    res = await productList(pageData)
  }
  Zh.messages.product.productList = res.res.map((item) => {
    let titleList = item.allTitleZh.split('/')
    let detilsList = item.allDetilsZh.split('/').map((item2, index) => {
      return {
        allDetils: item2,
        allTitle: titleList[index]
      }
    })
    return {
      title: item.titleZh,
      detils: item.detilsZh,
      image: item.imageZh,
      allDetilsList: detilsList
    }
  })
  En.messages.product.productList = res.res.map((item) => {
    let titleList = item.allTitleEn.split('/')
    let detilsList = item.allDetilsEn.split('/').map((item2, index) => {
      return {
        allDetils: item2,
        allTitle: titleList[index]
      }
    })
    return {
      title: item.titleEn,
      detils: item.detilsEn,
      image: item.imageEn,
      allDetilsList: detilsList
    }
  })
  swiperData.value = res.res.map((item) => {
    let titleList = item.allTitleEn.split('/')
    let detilsList = item.allDetilsEn.split('/').map((item2, index) => {
      return {
        allDetils: item2,
        allTitle: titleList[index]
      }
    })
    return {
      title: item.titleEn,
      detils: item.detilsEn,
      image: item.imageEn,
      allDetilsList: detilsList
    }
  })
  changeHeigth()
}
const getBakImg = async () => {
  const res = await productBakListType({
    type: pageData.type
  })
  BakImg.value = res.res[0]
  Zh.messages.product.bakImgList = res.res.map((item) => {
    return {
      bakImg: item.bakImgZh,
      title: item.titleZh
    }
  })
  En.messages.product.bakImgList = res.res.map((item) => {
    return {
      bakImg: item.bakImgEn,
      title: item.titleEn
    }
  })
}

watch(
  () => route,
  (newRoute, oldRoute) => {
    getFilmType()

    getProdectList()
    getBakImg()
  },
  { deep: true, immediate: true }
)

onMounted(() => {

  getFilmType()

  getProdectList()
  getBakImg()

})
</script>

<style lang="scss" scoped>
.case {
  background: #1a1f20;
  position: relative;
}
.heigthBox {
  height: 6500px;
}
.headerImg {
  height: 900px;
  width: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .title {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 800px;
    font-size: 165px;
    font-weight: bold;
    color: #ffdd00;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
.caseList {
  position: absolute;
  left: 0;
  top: 800px;
  width: 100%;
}
.caseBox {
  .card {
    width: 1800px;
    height: 880px;
    border-radius: 60px;
    background: #181c1d;
    margin-bottom: 100px;
    overflow: hidden;
  }
  .cardImg {
    img {
      width: 100%;
      height: 880px;
    }
  }
}
.cardText {
  justify-content: space-between;
  padding: 20px 80px;
  .title {
    font-size: 42px;
    font-weight: bold;
    color: #ffdd00;
  }
  .size {
    width: 700px;
    color: white;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
  .size2 {
    width: 500px;
    color: white;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
</style>